<template>
	<view class="page-container">
		<up-navbar
			safeAreaInsetTop
			fixed
			:bgColor="navbarcfg.bgColor"
			@left-click="pageBack"
			:title="navbarcfg.title"
		></up-navbar>
		<view v-if="rankData.id">
			<view class="rank-header" :style="{ backgroundImage: `url(${rankData.bg_url})` }">
				<view
					class="rank-header-content"
					:style="{ paddingTop: `calc(${commonStore.statusBarHeight}px + ${commonStore.navbarHeight}px)` }"
				>
					<image class="header-icon" :src="`${imgBaseUrl}rank-scenic.png`" />
					<view class="header-text">{{ rankData.title }}</view>
					<view class="header-desc">
						<text class="desc-text">海量用户数据</text>
						<text class="desc-text">行业口碑精选</text>
						<text class="desc-text">权威公正评价</text>
					</view>
					<view class="header-time">
						最近更新时间
						<text class="ml-5">{{ dataToDate(rankData.update_time, 1) }}</text>
					</view>
				</view>
			</view>
			<view class="rank-list">
				<view
					class="rank-item"
					v-for="(item, index) in rankData.items"
					:key="index"
					@click="gotoDetail(item.id)"
				>
					<view class="item-img-wrap">
						<view class="item-img" :style="{ backgroundImage: `url(${item.cover_url})` }" />
						<view class="cover-img cover-img-{{index+1}}">
							<text class="cover-text font-oppo" v-if="index > 2">{{ index + 1 }}</text>
						</view>
					</view>
					<view class="item-info">
						<view class="text-ellipsis fs-36 font-bold c-black-1d">{{ item.name }}</view>
						<view class="item-address mt-16 flex-a">
							{{ subString(item.address) }}
							<template v-if="item.distance_in_meter">
								<view class="item-line ml-4 mr-4">|</view>
								距您{{ distanceInKm(item.distance_in_meter) }}km
							</template>
						</view>
						<view class="item-price mt-16">
							<view class="item-rate font-oppo">
								{{ priceInCent(item.score_in_cent, 1) }}
							</view>
							<view class="flex-a">
								<view>分</view>
								<view class="item-comment ml-8" style="display: none">212条评论</view>
								<view class="item-line ml-16 mr-16">|</view>
								<view class="item-price-num">
									<text class="c-red fs-28 font-500">
										&yen;{{ priceInCent(item.lowest_price_in_cent) }}
									</text>
									起
								</view>
							</view>
						</view>
						<view class="item-desc mt-24 flex-a">
							<view class="text-2-ellipsis">{{ item.reason }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app"
import { dataToDate, distanceInKm, priceInCent, subString } from "@/mixins/mixins"
import useCommonStore from "@/store/common"
import useUserStore from "@/store/user"
import { pageBack, pageToScenicDetail } from "@/utils/page-redirect"
import immersiveNavbar from "@/mixins/immersive-navbar"
import { $getHotRankDetail } from "@/api/feed/rank"
import { getLocation } from "@/utils/location"

const imgBaseUrl = inject("imgBaseUrl")
const userStore = useUserStore()
const commonStore = useCommonStore()
const id = ref("")
const rankData = ref<any>({})
const userLongitude = ref("")
const userLatitude = ref("")

const gotoDetail = (id: string) => {
	pageToScenicDetail(id)
}

//#region 沉浸式导航栏
let { navbarcfg, pageTitle, pageScroll } = immersiveNavbar()
onPageScroll((e: any) => {
	let scrollTop = e.scrollTop
	pageScroll(scrollTop)
	pageTitle.value = "景区口碑榜"
})
//#endregion

const getRankData = () => {
	$getHotRankDetail(id.value, { longitude: userLongitude.value, latitude: userLatitude.value }).then((res) => {
		rankData.value = res
	})
}

onLoad((option = {}) => {
	id.value = option.id

	getLocation(false).then(
		({ longitude, latitude }) => {
			userStore.updateLocation({ longitude, latitude })
			// 页面逻辑处理
			userLongitude.value = longitude.toString()
			userLatitude.value = latitude.toString()
			getRankData()
		},
		() => {
			// 用户取消授权 uni.showToast({ title: "获取位置失败，请允许使用位置信息", icon: "none" });
			getRankData()
		}
	)
})
</script>
<style lang="scss" scoped>
.page-container {
	background: #18120b;
}
.rank-header {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	height: 556rpx;
	background-size: cover;
	&::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		background: linear-gradient(360deg, #18120b 0%, rgba(0, 3, 23, 0.2) 100%);
	}
	.rank-header-content {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 3;
		padding-left: 24rpx;
		padding-right: 24rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.header-icon {
			width: 540rpx;
			height: 162rpx;
		}
	}
	.header-text {
		margin-top: -16rpx;
		background: linear-gradient(90deg, #ffffff 34%, #ffeebe 78%, #fff9ee 98%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		display: inline-block;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 600;
	}
	.header-desc {
		color: rgba(255, 248, 227, 0.8);
		margin-top: 28rpx;
		font-size: 20rpx;
		.desc-text {
			position: relative;
			padding-right: 20rpx;
			padding-left: 20rpx;

			&:last-child {
				::before {
					display: none;
				}
			}
			::before {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				height: 90%;
				border: 1rpx solid #ffeebe;
			}
		}
	}
	.header-time {
		font-size: 20rpx;
		margin-top: 28rpx;
		color: rgba(255, 248, 227, 0.4);
	}
}
.rank-list {
	position: relative;
	z-index: 4;
	margin-top: -36rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	.rank-item {
		background: #fcf7f0;
		display: flex;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		color: rgba(0, 0, 0, 0.4);
		font-size: 24rpx;
		height: 329rpx;

		.item-img-wrap {
			position: relative;
			.item-img {
				width: 246rpx;
				height: 100%;
				background-position: center center;
				background-size: cover;
				border-radius: 16rpx;
				margin-left: 0;
			}
			.cover-img {
				position: absolute;
				top: -4rpx;
				left: 0;
				width: 64rpx;
				height: 70rpx;
				background: url($imgBaseUrl + "rank-top-bg.png") no-repeat center center;
				background-size: cover;
				&.cover-img-1 {
					background: url($imgBaseUrl + "rank-top-1.png") no-repeat center center;
					background-size: cover;
				}
				&.cover-img-2 {
					background: url($imgBaseUrl + "rank-top-2.png") no-repeat center center;
					background-size: cover;
				}
				&.cover-img-3 {
					background: url($imgBaseUrl + "rank-top-3.png") no-repeat center center;
					background-size: cover;
				}
				.cover-text {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 8rpx;
					text-align: center;
					color: $brown-7c;
					font-size: 26rpx;
					font-weight: 900;
				}
			}
		}
		.item-info {
			width: calc(100% - 246rpx);
			display: flex;
			flex-direction: column;
			padding: 24rpx 24rpx 24rpx 28rpx;
			.item-address {
				color: rgba(0, 0, 0, 0.4);
			}
			.item-price {
				display: flex;
				align-items: baseline;
				.item-rate {
					font-size: 32rpx;
					font-weight: 900;
					color: $brown-7c;
					line-height: 42rpx;
					margin-right: 4rpx;
				}
				.item-line {
					height: 100%;
					color: rgba(0, 0, 0, 0.2);
				}
			}
			.item-desc {
				background: url($imgBaseUrl + "rank-desc-bg.png") no-repeat center center;
				background-size: cover;
				padding: 20rpx;
				height: 112rpx;
				line-height: 36rpx;
				color: $brown-7c;
			}
		}
	}
}
</style>
